<template>
    <div id="mainView">
        <div class="left-chart aside-chart">
            <chart-list :chartList="leftList"> </chart-list>
        </div>

        <div class="right-chart aside-chart">
            <chart-list :chartList="rightList"> </chart-list>
        </div>

        <div class="middle-chart">
            <!-- <img
                class="top-img"
                src="../assets/image/chartList/top.png"
                alt=""
            /> -->
            <div class="middle-title">禄丰市紧密型医共体</div>

            <el-carousel
                indicator-position="outside"
                class="middle-top-chart"
                style="height: 691px"
                @change="changeList"
                :interval="second"
            >
                <el-carousel-item>
                    <span class="middle-tip">昨日门诊量</span>
                    <map-first></map-first>
                </el-carousel-item>
                <el-carousel-item>
                    <span class="middle-tip">昨日收入</span>
                    <map-second></map-second>
                </el-carousel-item>
                <el-carousel-item>
                    <span class="middle-tip">昨日住院人数</span>
                    <map-third></map-third>
                </el-carousel-item>
            </el-carousel>

            <!-- <div class="middle-top-chart" id="charts-container"></div> -->
            <div class="pallet1"></div>
            <div class="pallet2"></div>
            <canvas class="fire_fly" id="animateBg"></canvas>
            <div class="middle-bottom-chart">
                <bottom-table></bottom-table>
            </div>
        </div>
    </div>
</template>
<script>
import chartList from "../components/chartList.vue";
import bottomTable from "../components/bottomTable";
import mapFirst from "../components/maps/mapFirst.vue";
import mapSecond from "../components/maps/mapSecond.vue";
import mapThird from "../components/maps/mapThird.vue";
import { SCHEDULED_SCROLLING_TASK } from "../commonJs/config.js";
export default {
    name: "views",
    components: {
        chartList,
        bottomTable,
        mapFirst,
        mapSecond,
        mapThird,
    },
    data() {
        return {
            leftList: [],
            rightList: [],
            second: 7000,
        };
    },
    mounted() {
        this.second = SCHEDULED_SCROLLING_TASK
            ? SCHEDULED_SCROLLING_TASK * 1000
            : 7000;
        this.leftList = [
            {
                name: "总览",
                url: "total",
            },
            {
                name: "患者医院分布",
                url: "outpatient",
            },
            {
                name: "患者就诊科室",
                url: "management",
            },
        ];
        this.rightList = [
            {
                name: "医护数量统计",
                url: "inpatients",
            },
            {
                name: "药品消耗",
                url: "operationIndex",
            },
            {
                name: "流行病曲线",
                url: "overview",
            },
        ];
    },

    methods: {
        //当切换大屏时，变换两侧图表
        changeList(index) {
            switch (index) {
                case 0:
                    this.leftList = [
                        {
                            name: "总览",
                            url: "total",
                        },
                        {
                            name: "近7日患者医院分布",
                            url: "outpatient",
                        },
                        {
                            name: "近7日患者就诊科室",
                            url: "management",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日药品消耗",
                            url: "operationIndex",
                        },
                        {
                            name: "近7日流行病曲线",
                            url: "overview",
                        },
                    ];
                    break;
                case 1:
                    this.leftList = [
                        {
                            name: "总览",
                            url: "total",
                        },
                        {
                            name: "近7日医保统筹占比",
                            url: "medicalInsurance",
                        },
                        {
                            name: "近7日医院收入",
                            url: "income",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日医院收入占比",
                            url: "incomePrecent",
                        },
                        {
                            name: "近7日结算方式",
                            url: "operationIncome",
                        },
                    ];
                    break;
                case 2:
                    this.leftList = [
                        {
                            name: "总览",
                            url: "total",
                        },
                        {
                            name: "近7日转诊量",
                            url: "referralVolume",
                        },
                        {
                            name: "近7日远程会诊人次",
                            url: "remotePeople",
                        },
                    ];
                    this.rightList = [
                        {
                            name: "医护数量统计",
                            url: "inpatients",
                        },
                        {
                            name: "近7日在院/出院人数",
                            url: "hospitalPeople",
                        },
                        {
                            name: "出院人数历史",
                            url: "leaveHistory",
                        },
                    ];
                    break;
            }
        },
    },
};
</script>
<style lang="scss">
#mainView {
    height: 100%;
    .aside-chart {
        width: 450px;
        height: 100%;
        position: absolute;
        top: 0;
        &.left-chart {
            left: 0;
        }
        &.right-chart {
            left: 1470px;
        }
    }
    .middle-chart {
        width: 1020px;
        height: 100%;
        position: absolute;
        left: 450px;
        .middle-title {
            height: 70px;
            line-height: 70px;
            background: #071f4f;
            font-size: 48px;
            color: #17caf0;
            text-shadow: 0px 3px 12px #333fff;
            font-weight: 500;
        }

        .middle-top-chart {
            width: 100%;
            height: 610px;
            background: #071f4f;
            .el-carousel__container {
                height: 630px;
            }
            .middle-tip {
                float: left;
                width: 40px;
                font-size: 30px;
                font-weight: bold;
                color: #17caf0;
                text-shadow: 0px 1px 2px #333fff;
                line-height: 35px;
                margin-left: 25px;
                margin-top: 40px;
            }
        }

        .middle-bottom-chart {
            width: 100%;
            height: 434px;
        }
    }
    .el-carousel__indicators {
        display: none;
    }
    .amap-marker-label {
        background-color: transparent;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        border: none;
        .info {
            height: 25px;
        }
    }
    .fire_fly {
        position: absolute;
        top: 0;
        left: 0;
    }

    .pallet1,
    .pallet2 {
        position: absolute;
        border-radius: 50%;
        transform: rotateX(84deg);
    }
    .pallet1 {
        top: 510px;
        left: 318px;
        width: 420px;
        height: 420px;
        animation: rotate3d 15s infinite linear;
        background: url("../assets/image/mainView/rotate_bg1.png") 0 0/100% 100%
            no-repeat;
    }
    .pallet2 {
        top: 280px;
        left: 75px;
        width: 900px;
        height: 900px;
        animation: rotate3d 15s infinite linear reverse;
        background: url("../assets/image/mainView/rotate_bg2.png") 0 0/100% 100%
            no-repeat;
    }
    @keyframes rotate3d {
        0% {
            transform: rotateX(84deg) rotateZ(360deg);
        }
        100% {
            transform: rotateX(84deg) rotateZ(0);
        }
    }
    .parent {
        width: 420px;
        height: 290px;
        border: 1px solid #1d5acc;
        border-radius: 3px;
        .name {
            display: inline-block;
            width: 138px;
        }
        .title {
            background: #071f4f;
            border-bottom: 1px solid #1d5acc;
            font-size: 18px;
            height: 40px;
            line-height: 40px;
        }
        .label {
            font-size: 16px;
            text-align: left;
            line-height: 24px;
            margin-left: 6px;
        }
    }
}
</style>
